<template name="Upload">
	<div>
		<div class="files-box" v-if="u_type == 3">
			<div :key="index" :index="index" v-for="(item, index) in u_initialAttchments">
				<span class="u-pr-10" @click="preview(item.url,item.type,item.fileSuffix,item.folderName,item.fileName,item.suffix)">{{item.fileName}}<span style="color: red;" v-if="u_showSize && item.size">({{item.size}}MB)</span></span>&nbsp;<u-icon name="close" color="red" @click="removeAttach(item.WF_OrUnid,item.folderName,item.fileName,item.suffix,u_appid,u_fieldName,u_orunid,u_type,u_limit,u_initialAttchments)" v-if="!u_readonly"></u-icon>
			</div>
			<div
				class="attachment-btn u-center u-pointer"
				@click="show = true" v-if="!u_readonly">
					<span class="u-cl-content">点击添加附件</span>
					<u-icon class="u-cl-content" name="attach"></u-icon>
			</div>
		</div>
		<div class="pictrues-box" v-else>
			<div v-for="(item,index) in u_initialAttchments" :key="index" style="padding: 10rpx;position: relative;"
				@click="preview(item.url,item.type,item.fileSuffix,item.folderName,item.fileName,item.suffix)">
				<u-image width="210rpx" height="210rpx" :src="item.thumbUrl?item.thumbUrl:item.url"></u-image>
				<span class="cancel" @click.stop="removeAttach(item.WF_OrUnid,item.folderName,item.fileName,item.suffix,u_appid,u_fieldName,u_orunid,u_type,u_limit,u_initialAttchments)" v-if="!u_readonly"></span>
				<div style="text-align: center;color: red;" v-if="u_showSize && item.size">{{item.size}}MB</div>
			</div>
			<div class="aui-upload-box" @click="show = true" v-if="!u_readonly">
				<div class="aui-upload-pic">
					<span class="chose_pic_btn">
						<!-- <input type="file" accept="image/*" /> -->
						<div></div>
					</span>
				</div>
			</div>
		</div>
		
		<!-- 选择上传的方式 -->
		<u-popup v-model="show" mode="bottom" @close="closePopup">
			<div class="popup-box">
				<div class="popup-item" v-for="(item, index) in chooseTypes" @click="clickPopup(item,u_appid,u_fieldName,u_orunid,u_type,u_limit,u_initialAttchments)">
					<div>{{item.text}}</div>
				</div>
			</div>
		</u-popup>
  </div>
</template>

<script>
import globalData from "@/globalData";
import COS from "../common/js/cos-wx-sdk-v5.min.js";
export default {
	name: "Upload",
	props:{
		u_appid:{
			type:String,
			default:''
		},
		u_orunid:{
			type:String,
			default:''
		},
		u_fieldName:{
			type:String,
			default:''
		},
		u_limit:{
			type:String,
			default:'-1'
		},
		u_initialAttchments:{
			type:Array,
			default:[]
		},
		u_type:{
			type:String,
			default: '0'
		},
		u_readonly:{
			type:Boolean,
			default: false
		},
		u_showSize:{
			type:Boolean,
			default: false
		}
	},
	
  data() {
    return {
	  attachments: [],
	  appid: '',
	  fieldName: '',
	  orunid: '',
	  type: '',// 默认值，0:图片；1:视频；2:图片和视频；3:文件；
	  folderName: '',// 文件夹
	  Bucket: globalData.CosBucket,// 存储桶
	  Region: globalData.CosRegion,// 存储桶所在地域
	  fileSuffix: '',// 如：jpg、doc、xlsx等
	  cos: null,
	  show: false,
	  chooseTypes: [
	  	{
	  		text: '从手机相册选择',
	  		action: 'uploadImgFile'
	  	},
	  	{
	  		text: '从微信会话选择',
	  		action: 'uploadFile'
	  	},
	  	{
	  		text: '取消',
	  		action: 'closePopup'
	  	}
	  ],
	  limit: -1,
	  CustomReturnField: '',//自定义返回字段，如果没有，默认为saveAttachmentList
	  MultipleChoice: 9//弹出可以一次性选择图片的数量,默认9张，可以通过页面传值自定义
    };
  },
  
  onLoad(options) {
	
  },

  methods: {
	  
	/** 
	 * 初始化父组件传过来的数据到上传组件中
	 */
	initData(u_appid,u_fieldName,u_orunid,u_type,u_limit,u_initialAttchments) {
		let that = this
		//判断是否需要初始化appid
		if(!that.isNotNull(that.appid)) {
			that.appid = u_appid
		}
		//判断是否需要初始化folderName
		if(!that.isNotNull(that.folderName)) {
			that.initFolderName(u_appid)
		}
		//判断是否需要初始化filedName
		if(!that.isNotNull(that.fieldName)) {
			that.fieldName = u_fieldName
		}
		//判断是否需要初始化orunid
		if(!that.isNotNull(that.orunid)) {
			that.orunid = u_orunid
		}
		//判断是否需要初始化type
		if(!that.isNotNull(that.type)) {
			that.type = u_type
		}
		//判断是否需要初始化limit
		if(that.limit == -1 && that.isNotNull(u_limit)) {
			that.limit = u_limit
		}
		//判断是否需要初始化attachments
		if(that.attachments.length == 0 && that.isNotNull(u_initialAttchments)){
			that.attachments = u_initialAttchments
		}
		if(!that.isNotNull(that.cos)){
			that.cos = new COS({
				SecretId: globalData.CosSecretId,
				SecretKey: globalData.CosSecretKey,
			});
		}
	},
	  
	async clickPopup(item,appid,fieldName,orunid,type,limit,initialAttchments){
		//初始化父组件传过来的数据到上传组件中
		this.initData(appid,fieldName,orunid,type,limit,initialAttchments)
		console.log("attachments:" + this.attachments.length)
		console.log(this.attachments)
		console.log("limit:" + this.limit)
		if(this.limit != -1 && (this.attachments.length == this.limit || this.attachments.length > this.limit)){
			this.showMSG('none','只能选择'+this.limit+'个附件噢！')
		}else{
			if(item.action == 'uploadImgFile'){
				this.uploadFile_picture(appid,fieldName,orunid)
			}else if(item.action == 'uploadFile'){
				this.uploadFile_file(appid,fieldName,orunid)
			}else if(item.action == 'closePopup'){
				this.show = false
			}
		}
	},
	
	closePopup(){
		this.show = false
	},
	  
	/**
	 * 上传图片
	 */
	async uploadFile_picture(appid,fieldName,orunid){
		
		let that = this
		//获取媒体类型
		let mediaType = that.getChooseMediaType(that.type)
		if(mediaType == 'file') {
			that.showMSG('none','不允许从手机相册中选择文件哦')
			return
		}
		
		// 选择图片
		wx.chooseMedia({
		    count: that.MultipleChoice, // 默认9
			mediaType: mediaType,
		    sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
		    success: function (res) {
				console.log("选择图片获取的信息：")
				console.log(res)
				console.log("---------")
				for(let i in res.tempFiles) {
					let filePath = res.tempFiles[i].tempFilePath;
					let fileName = res.tempFiles[i].name;// 图片名称
					let tempfilename = filePath.substr(filePath.lastIndexOf('/') + 1);// 临时文件名
					
					if(that.isNotNull(tempfilename)){
						// 获取文件后缀，如jpg/doc等
						that.fileSuffix = tempfilename.split(".")[1];
					}
					
					// 如果获取不到图片名称，则使用临时文件名作为图片名称
					if(fileName == undefined || fileName == 'undefined'){
						fileName = tempfilename;
					}
					
					//文件大小
					let fileSize = res.tempFiles[i].size
					if(fileSize > (1024*1024*50)){
						that.showMSG('none','单个图片大小请限制在50M以内')
						return;
					}
					
					// 获取五位随机数
					let suffix = that.randomLetter(5);
					
					// 文件名称过滤特殊字符
					fileName = that.FilterSpecialChar(fileName);
					
					// 防止文件重复发生覆盖,需要在文件名称增加后缀
					let upload_fileName = that.addSuffix(fileName, suffix);
					
					console.log("res=", res);
					console.log("suffix=", suffix);
					console.log("fileName=", fileName);
					console.log("upload_fileName=", upload_fileName);
					
					//缩略图
					let COS_ThumbTempFilePath = ""
					//如果fileType=video表示要上传的是视频类型，需要保存缩略图
					if(that.isNotNull(res.tempFiles[i].fileType) && res.tempFiles[i].fileType=='video'){
						//获取视频缩略图临时路径
						let thumbTempFilePath = res.tempFiles[i].thumbTempFilePath
						if(that.isNotNull(thumbTempFilePath)){
							//从缩略图的临时路径获取上传缩略图的文件名
							let thumb_upload_fileName = that.getFileNameFromTempPath(thumbTempFilePath)
							if(that.isNotNull(thumb_upload_fileName)){
								//COS上传缩略图
								COS_ThumbTempFilePath = that.uploadCOS(thumb_upload_fileName,thumbTempFilePath,fileName,suffix,fileSize,false)
								if(!that.isNotNull(COS_ThumbTempFilePath)){
									that.showMSG('none','上传缩略图失败')
									return;
								}
							}else{
								that.showMSG('none','获取缩略图的文件名出错')
								return;
							}
						}else{
							that.showMSG('none','获取不到缩略图路径')
							return;
						}
					}
					
					//COS上传文件
					that.uploadCOS(upload_fileName,filePath,COS_ThumbTempFilePath,fileName,suffix,fileSize,true)
				}
			}
		});
		
	},
	
	/**
	 * 上传文件
	 */
	async uploadFile_file(){
		
		let that = this
		
		//获取媒体类型
		let mediaType = that.getChooseMessageFileType(that.type)
		console.log("wx.chooseMessageFile获取到的type:"+mediaType)
		// 选择文件
		wx.chooseMessageFile({
		    count: that.MultipleChoice,
		    type: mediaType,
		    success: function (res) {
				for(let i in res.tempFiles) {
					let filePath = res.tempFiles[i].path;
					let fileName = res.tempFiles[i].name;// 文件名称
					let tempfilename = filePath.substr(filePath.lastIndexOf('/') + 1);// 临时文件名
					
					if(that.isNotNull(tempfilename)){
						// 获取文件后缀，如jpg/doc等
						that.fileSuffix = tempfilename.split(".")[1];
					}
					
					//文件大小
					let fileSize = res.tempFiles[i].size
					if(fileSize > (1024*1024*50)){
						that.showMSG('none','单个文件大小请限制在50M以内')
						return;
					}
					
					// 获取五位随机数
					let suffix = that.randomLetter(5);
					// 文件名称过滤特殊字符
					fileName = that.FilterSpecialChar(fileName);
					// 防止文件重复发生覆盖,需要在文件名称增加后缀
					let upload_fileName = that.addSuffix(fileName, suffix);
					
					console.log("res=", res);
					console.log("suffix=", suffix);
					console.log("fileName=", fileName);
					console.log("upload_fileName=", upload_fileName);
					
					//COS上传文件
					that.uploadCOS(upload_fileName,filePath,"",fileName,suffix,fileSize,true)
					
				}
			},
			fail: function (res) {
			   console.log("fail");
			   console.log(res)
			},
			complete: function (res) {
			   console.log("complete");
			   console.log(res)
			}
		});
	},
	
	/**
     * 保存附件基本信息到数据库
	 * @param {Object} url 可直接访问路径
	 * @param {Object} fileName 文件名称
	 * @param {Object} suffix 后缀
     */
    async SaveAttachmentInfo(url, thumbUrl, fileName, suffix, fileSize) {
		// 保存附件基本信息到数据库
		const userInfo = uni.getStorageSync('userInfo');
		let result = await this.$u.api.unifyRequest({
			userId: userInfo.userId,
			nickName: userInfo.nickName,
			appid: 'FILE',
			wf_num: 'R_FILE_BL001',
			fileName: fileName,
			suffix: suffix,
			size: fileSize,
			url: url,// 外网访问地址，可以加前缀(https://)，也可以不加
			thumbUrl: thumbUrl,
			folderName: this.folderName,
			orunid: this.orunid,
			fieldName: this.fieldName,
			type: this.type,
			bucket: this.Bucket,
			region: this.Region,
			fileSuffix: this.fileSuffix,
			loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
		});
		result = JSON.parse(JSON.stringify(result));
		if(result.code == "200"){
			this.attachments.push(result.data);// result.data = {WF_OrUnid: "",fileName: "",url: "",type: ""}
			// 通知父组件更新数据
			this.sendAttachmentsData()
		}
    },
	
	/**
	 * 获取随机数（不能使用异步，会获取不到返回值）
	 * @param {Object} len 需要获取几位随机数
	 */
	randomLetter(len) {
	  const letters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
	  let res = ''
	  for (let i = 0; i < len; i++) {
	    var n = Math.round(Math.random() * letters.length)
	    res += letters[n]
	  }
	  return res;
	},
	
    /**
     * 增加文件名称后缀（不能使用异步，会获取不到返回值）
	 * @param {Object} fileName 文件名称
	 * @param {Object} suffix 后缀
     */
    addSuffix(fileName, suffix) {
		
		if(this.isNotNull(fileName) && this.isNotNull(suffix)){
			let arr = fileName.split(".");
			if(arr.length == 2){
				fileName = arr[0] + suffix + "." + arr[1];
			}
		}
		return fileName;
    },
	
	/**
     * 过滤特殊字符（不能使用异步，会获取不到返回值）
	 * 
	 * 文件名称不能包含：\/:*?"<>|
	 * 
	 * @param {Object} fileName 文件名称
     */
    FilterSpecialChar(fileName) {
		fileName = fileName.trim();
		return fileName.replace(/[/\\:\*<>\?\"\|]/g, '');
	},
	
	/**
	 * 附件预览
	 * @param {Object} url 可直接访问地址
	 * @param {Object} type 文件类型；0:图片；1:文件；2:图片或文件
	 * @param {Object} fileSuffix 如：jpg、doc、xlsx等
	 * @param {Object} folderName 文件夹
	 * @param {Object} fileName 文件名称
	 * @param {Object} suffix 文件名称后缀
	 */
	async preview(url, type, fileSuffix, folderName, fileName, suffix) {
		
		if(type == '0' || fileSuffix == 'mp4'){
			wx.previewMedia({
				sources: [
					{
						url: url, // 预览地址，可图片可视频
						type: fileSuffix=="mp4"?"video":"image" // image：图片，video: 视频
					}
				]
			});
		} else {
			//如果后缀为图片格式，则直接预览
			if(fileSuffix == 'jpg' || fileSuffix == 'png' || fileSuffix == 'jpeg' || fileSuffix == 'gif'){
				wx.previewImage({
					urls: [url],
					current: url
				});
			}else{
				// 防止文件重复发生覆盖,需要在文件名称增加后缀
				var upload_fileName = folderName + this.addSuffix(fileName, suffix);
				
				// 下载对象到本地
				wx.downloadFile({
					url: url, // 需要加 url 的域名作为下载白名单
					success (res) {
						console.log(res.statusCode, res.tempFilePath);
						// 预览附件
						wx.openDocument({
							filePath: res.tempFilePath,
							fileType: fileSuffix,
							success: function (res) {
								console.log("打开文档成功")
								console.log(res);
							},
							fail: function (res) {
								console.log("fail");
								console.log(res)
							},
							complete: function (res) {
								console.log("complete");
								console.log(res)
							}
						});
					},
					fail: function (err) {
						console.log(err);
					},
				});
			}
		}
	},
	
	/**
	 * 删除附件
	 * @param {Object} WF_OrUnid 唯一id
	 * @param {Object} folderName 文件夹
	 * @param {Object} fileName 文件名称
	 * @param {Object} suffix 文件名称后缀
	 */
	async removeAttach(WF_OrUnid, folderName, fileName, suffix, u_appid, u_fieldName, u_orunid, u_type, u_limit, u_initialAttchments) {
		
		//初始化父组件传过来的数据到上传组件中
		this.initData(u_appid,u_fieldName,u_orunid,u_type,u_limit,u_initialAttchments)
		
		// 防止文件重复发生覆盖,需要在文件名称增加后缀
		var upload_fileName = folderName + this.addSuffix(fileName, suffix);
		// 第1步 先删除数据表中的记录
		const userInfo = uni.getStorageSync('userInfo')
		let data = await this.$u.api.unifyRequest({
			userId: userInfo.userId,
			nickName: userInfo.nickName,
			appid: 'FILE',
			wf_num: 'R_FILE_BL003',
			WF_OrUnid: WF_OrUnid,
			orunid: this.orunid,
			fieldName: this.fieldName,
		    loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
		});
		if(data.code == '200'){
			this.$u.toast("删除附件成功")
			this.attachments = data.data
			// 通知父组件更新数据
			this.sendAttachmentsData()
			// 第2步 再删除腾讯云，这里不是一定要删除的，所以删除成功或失败，影响不大
			this.cos.deleteObject({
			    Bucket: this.Bucket, // 填入您自己的存储桶，必须字段
			    Region: this.Region,  // 存储桶所在地域，例如ap-beijing，必须字段
			    Key: upload_fileName,  // 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段
			}, function(err, data) {
			    console.log(err || data);
			});
			
		} else {
			this.$u.toast("删除附件失败")
		}
	},
	
	/** 
	 * 根据上传的临时文件路径获取文件名
	 */
	getFileNameFromTempPath(tempPath) {
		let that = this
		let fileName = tempPath.substr(tempPath.lastIndexOf('/') + 1)
		// 获取五位随机数
		let thumb_suffix = that.randomLetter(5);
		// 文件名称过滤特殊字符
		fileName = that.FilterSpecialChar(fileName);
		// 防止文件重复发生覆盖,需要在文件名称增加后缀
		let upload_fileName = that.addSuffix(fileName, thumb_suffix);
		return upload_fileName
	},
	
	/** 
	 * COS文件上传
	 * isSave: 是否需要执行SaveAttachmentInfo方法保存到数据库
	 */
	uploadCOS(upload_fileName,filePath,COS_ThumbTempFilePath,fileName, suffix, fileSize,isSave) {
		let that = this
		// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
		if(!that.isNotNull(that.cos)){
			that.cos = new COS({
				SecretId: globalData.CosSecretId,
				SecretKey: globalData.CosSecretKey,
			});
		}
		let COS_FilePath = "https://" + that.Bucket + ".cos."+ that.Region + ".myqcloud.com/" + that.folderName + upload_fileName
		that.cos.postObject({
		    Bucket: that.Bucket,
		    Region: that.Region,
		    Key: that.folderName + upload_fileName,// 文件夹+文件名称
		    FilePath: filePath,
		    onProgress: function (info) {
		        console.log(JSON.stringify(info));
		    }
		}, function (err, data) {
		    console.log(err || data);
			if(data){
				if(isSave){
					// data.Location返回的路径，会转成%之类的，导致不能直接访问，所以路径需要自己拼
					// COS_FilePath = "https://" + that.Bucket + ".cos."+ that.Region + ".myqcloud.com/" + that.folderName + upload_fileName;
					COS_FilePath = "https://" + data.Location
					that.show = false
					//如果COS_ThumbTempFilePath为空，说明上传的是图片，那么缩略图为图片本身
					if(!that.isNotNull(COS_ThumbTempFilePath)){
						COS_ThumbTempFilePath = COS_FilePath
					}
					that.SaveAttachmentInfo(COS_FilePath, COS_ThumbTempFilePath, fileName, suffix, fileSize);
				}
				
			}
		});
		return COS_FilePath
	},
	
	/**
	 * 初始化folderName
	 */
	initFolderName(appid) {
		// 获取当前日期
		const thisDay = new Date();
		const year = thisDay.getFullYear();// 年
		let month = thisDay.getMonth() + 1;// 月
		// 如果月份是个位数，在前面补0
		if (month >= 1 && month <= 9) {
			month = '0' + month 
		}
		this.folderName = "perpartner/" + year + month + "/" + appid + "/";
	},
	
	/**
	 * 通知父组件接收新的文件列表数据
	 */
	sendAttachmentsData() {
		this.$emit("receiveAttachmentsData", this.attachments)
	},
	
	/** 
	 * 通过父组件传的type值获取wx.chooseMedia的mediaType的值
	 */
	getChooseMediaType(type) {
		switch (type){
		    case "1":
		        return "video"
		        break;
		    case "2":
		        return "mix"
		        break;
		    case "3":
		        return "file"
		        break;
		    default :
		        return "image"
		}
	},
	
	/**
	 * 通过父组件传的type值获取wx.chooseMessageFile的type的值
	 */
	getChooseMessageFileType(type) {
		switch (type){
		    case "1":
		        return "video"
		        break;
		    case "2":
		        return "image"
		        break;
		    case "3":
		        return "file"
		        break;
		    default :
		        return "image"
		}
	}
	
	
  },
};
</script>

<style lang="scss" scoped>
	.color-blue {
		color: #3B79FE;
	}
	
	.popup-box{
		padding-bottom: 50rpx;
		padding-top: 50rpx;
	}
	
	.popup-item{
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 33rpx;
	}
	
	.prew_img,.upload,.prew_video{
	    width: 148rpx;
	    height: 148rpx;
	    margin: 0 30rpx 30rpx 0;
	}
	.prew_img{
	    position: relative;
	    background: no-repeat center center;
	    background-size: cover;
	}
	.prew_img .bind{
	    width: 100%;
	    height: 100%;
	}
	.prew_img .delete,.prew_video .delete{
	    position: absolute;
	    top: -16rpx;
	    right: -16rpx;
	    width: 32rpx;
	    height: 32rpx;
	    z-index: 9;
	}
	.prew_video{
	    display: flex;
	    align-items: center; /*垂直居中*/
	    justify-content: center; /*居中对齐*/
	    position: relative;
	    background-color: #000;
	}
	.prew_video[hidden]{
	    display: none;
	}
	.prew_video .play{
	    width: 48rpx;
	    height: 48rpx;
	}
	/* 坑~ video必须先渲染出来，不然全屏会横屏 */
	#prew_video{
	    position: absolute;
	    left: 0;
	    top: 0;
	    width: 1rpx;
	    height: 1rpx;
	}
	
	.pictrues-box {
		display: flex;
		flex-wrap: wrap;
		// width: 95%;
		// margin: 0 auto;
		padding-bottom: 40rpx;
	}
	
	.aui-upload-box {
		// background-color: #fff;
		width: 210rpx;
		height: 210rpx;
		padding-top: 10rpx;
		padding-right: 10rpx;
	}
	
	
	.chose_pic_btn {
		width: 190rpx;
		height: 190rpx;
		position: relative;
		display: inline-block;
		background-image: url('');
		box-sizing: border-box;
		background-size: 45px 45px;
		background-position: center center;
		background-repeat: no-repeat;
		background-color: #ededed;
		margin-left: 3.3333%;
		margin-bottom: 12px;
		border-radius: 5px;
	}
	
	.chose_pic_btn div {
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
		width: 100%;
		height: 100%;
	}
	
	
	
	.aui-upload-box .pic_look {
		width: 30%;
		height: 100px;
		display: inline-block;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		box-sizing: border-box;
		margin-left: 3.3333%;
		margin-bottom: 12px;
		position: relative;
		border-radius: 5px;
	}
	
	.aui-upload-box .pic_look em {
		position: absolute;
		display: inline-block;
		width: 20px;
		height: 20px;
		background-color: #fff;
		color: #fff;
		font-size: 18px;
		right: -0.5rem;
		top: -0.5rem;
		text-align: center;
		line-height: 22px;
		border-radius: 50%;
		font-weight: 700;
		z-index: 1;
		background-image: url('');
		background-size: 20px;
	}
	
	// 附件删除样式
	.cancel {
		 width: 40rpx;
		 height: 40rpx;
		 line-height: 38rpx;
		 border: 2rpx solid #bcc4caf2;
		 background-color: #bcc4caf2;
		 border-radius: 50%;
		 position: absolute; /* 父组件赋予属性relative生效 */
		 right: 0rpx; /* 使元素处于右上角-右 */
		 top: 0rpx; /* 使元素处于右上角-上 */
	}
	
	.cancel::before,
	.cancel::after {
		 content: "";
		 position: absolute;
		 height: 28rpx;
		 width: 2rpx;
		 top: 6rpx; /* 使X处于圆中心 */
		 left: 18rpx; /* 使X处于圆中心 */
		 background-color: #353535;
	}
	
	.cancel::before {
		transform: rotate(45deg);
	}
	
	.cancel::after {
		transform: rotate(-45deg);
	}
	
	.files-box {
		width: 90%;
		margin: 0 auto;
		padding-bottom: 40rpx;
	}
	
</style>
